<template>
	<div class="flex relative justify-between w-11/12 h-100 mx-auto">
		<div class="div__border w-3/10 h-full" ref="leftRef"></div>
		<div class="div__border w-3/10 h-full" ref="rightRef"></div>
		<Button></Button>
	</div>
</template>

<script>
import Button from '@/components/button.vue'

export default {
	components: {
		Button
	},
	data() {
		return {
			leftCharts: null,
			leftXData: ['旅游行业', '教育培训', '游戏行业', '医疗行业', '电商行业', '社交行业', '金融行业'],
			leftYData: [10, 52, 200, 334, 390, 330, 220],
			color: ['gold', 'hotpink', 'orange', 'purple', 'indianred', 'chartreuse', '#ff8906', '#f25f4c', 'lightgreen', 'deepskyblue'],
			rightCharts: null,
			leftStartValue: 0,
			leftEndValue: 4,
			rightStartValue: 0,
			rightEndValue: 4,
			timer1: null,
			timer2: null
		}
	},
	mounted() {
		this.leftBarCharts(this.leftXData, this.leftYData)
		this.startLeftInterval()
		this.rightBarCharts(this.color)
		this.startRightInterval()
	},
	destroyed() {
		clearInterval(this.timer1)
		clearInterval(this.timer2)
	},
	methods: {
		leftBarCharts(xdata, ydata) {
			this.leftCharts = this.$echarts.init(this.$refs.leftRef)
			const LEFT_OPTIONS = {
				title: {
					text: '就业行业',
					textStyle: {
						color: ' white',
						fontFamily: '微軟正黑體',
						fontWeight: 'lighter'
					},
					left: '3%',
					top: '3%'
				},
				grid: {
					show: false,
					width: '78%',
					left: '10%',
					top: '17%',
					bottom: '10%'
				},
				tooltip: {
					trigger: 'item'
				},
				dataZoom: {
					show: false,
					startValue: this.leftStartValue,
					endValue: this.leftEndValue
				},
				xAxis: {
					type: 'category',
					data: xdata,
					axisLabel: {
						color: 'white'
					}
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						color: 'white'
					}
				},
				series: [
					{
						type: 'bar',
						data: ydata,
						markPoint: {
							data: [{ type: 'max' }, { type: 'min' }]
						},
						markLine: {
							data: [{ type: 'average', itemStyle: { color: 'white' } }]
						},
						itemStyle: {
							borderRadius: [30, 30, 0, 0],
							color: {
								type: 'linear',
								x: 0,
								y: 1,
								x1: 0,
								y1: 0,
								colorStops: [
									{ offset: 0, color: '#5052ee' },
									{ offset: 1, color: '#ab6ee5' }
								]
							}
						},
						label: {
							show: true,
							color: 'white',
							position: 'outside'
						}
					}
				]
			}
			this.leftCharts.setOption(LEFT_OPTIONS)
			this.leftCharts.on('mouseover', () => {
				clearInterval(this.timer1)
			})
			this.leftCharts.on('mouseout', () => {
				this.startLeftInterval()
			})
			window.onresize = this.leftCharts.resize
		},
		rightBarCharts(color) {
			this.rightCharts = this.$echarts.init(this.$refs.rightRef)
			const RIGHT_OPTIONS = {
				title: {
					text: '学习进度',
					textStyle: {
						color: ' white',
						fontFamily: '微軟正黑體',
						fontWeight: 'lighter'
					},
					left: '3%',
					top: '3%'
				},
				grid: {
					show: false,
					width: '75%',
					left: '20%',
					top: '17%',
					bottom: '10%'
				},
				tooltip: {
					trigger: 'item'
				},
				xAxis: {
					show: false,
					type: 'value',
					axisLabel: {
						color: 'white'
					}
				},
				yAxis: [
					{
						id: 0,
						type: 'category',
						data: ['Html', 'Css3', 'javascript', 'Bootstrap', 'Ajax', 'node', 'express', 'Mysql', 'Vue', 'React'],
						axisLabel: {
							color: 'white'
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						}
					},
					{
						id: 10,
						category: 'category',
						data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						}
					}
				],
				series: [
					{
						type: 'bar',
						yAxisIndex: 0,
						data: [90, 95, 75, 85, 60, 30, 60, 85, 50, 10],
						itemStyle: {
							borderRadius: [30, 30, 30, 30],
							color(arg) {
								let num = color.length
								return color[arg.dataIndex % num]
							}
						},
						label: {
							show: true,
							color: 'white',
							position: 'inside',
							formatter(arg) {
								return `${arg.data}%`
							}
						},
						barWidth: 30,
						barCategoryGap: 50
					},
					{
						type: 'bar',
						yAxisIndex: 1,
						data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
						barCategoryGap: 50,
						barWidth: 30,
						itemStyle: {
							color: 'none',
							borderColor: '#00c1de',
							borderRadius: [30, 30, 30, 30]
						}
					}
				]
			}
			this.rightCharts.setOption(RIGHT_OPTIONS)
			wihdow.onresize = this.rightCharts.resize
		},
		startLeftInterval() {
			if (this.timer1) {
				clearInterval(this.timer1)
			}
			this.timer1 = setInterval(() => {
				if (this.leftEndValue > this.leftXData.length - 1) {
					this.leftStartValue = -1
					this.leftEndValue = 3
				}
				this.leftStartValue++
				this.leftEndValue++
				this.leftBarCharts(this.leftXData, this.leftYData)
			}, 2000)
		}
	}
}
</script>

<style></style>
